import React, { useState, useEffect } from 'react'
import './index.css'
import littleimg1 from '../../static/img/Search and Particulars/img-1.png'
import littleimg2 from '../../static/img/Search and Particulars/img-2.png'
import littleimg3 from '../../static/img/Search and Particulars/grape.png'
import littleimg4 from '../../static/img/Search and Particulars/zishen.png'
import shareimg from '../../static/img/Search and Particulars/share.png'
import boyimg from '../../static/img/Search and Particulars/img-3.png'
import buyimg from '../../static/img/Search and Particulars/girl.png'
import buyimg2 from '../../static/img/Search and Particulars/boy.png'
import { Rate } from 'antd';//评论小星星插件
import axios from 'axios'
import { useLocation, useNavigate } from 'react-router'
import { Breadcrumb } from 'antd'
import { message } from 'antd';
import { Link } from 'react-router-dom';
export default function Particulars() {
    var state = {
        imgs: [
            { img: littleimg1, ischeck: true },
            { img: littleimg2, ischeck: false },
            { img: littleimg3, ischeck: false },
            { img: littleimg1, ischeck: false },
        ],
        kmg: [
            { mg: 500, ischeck: false },
            { mg: 1000, ischeck: false },
            { mg: 1500, ischeck: false },
            { mg: 2000, ischeck: false }
        ],
        evaluate: [
            { id: 0, phon: 15215244, evaluate: '奶oh佛啊艾弗森的厚爱回复', time: '2154-10', timenums: '20:06:03', starnums: 2 },
            { id: 1, phon: 17275415485, evaluate: '闹翻你', time: '154-12', timenums: '20:06:03', starnums: 3 },
            { id: 2, phon: 152521248, evaluate: '倒是看来复活节你', time: '2501-12', timenums: '20:06:03', starnums: 1 },
            { id: 3, phon: 5252257485, evaluate: '奶oh佛啊艾弗森的厚爱回复', time: '1214-15', timenums: '20:06:03', starnums: 4 },
        ],
        infornation: {
            nowprice: '20.0',
            oldprice: '40.0',
            title: '新疆哈密瓜1500kg',
            infor: '雀斑石榴持续热卖！云南蒙自石榴,原产波斯（今伊朗）一带,公元前二世纪时传 入我国。是中国三大石榴之一,粒大皮薄,汁多味甜爽口。雀斑石榴持续热卖！云 南蒙自石榴,原产波斯（今伊朗）一带,公元前二世纪时传入我国。是中国三大石 榴之一,粒大皮薄,汁多味甜爽口。',
            commodityname: '男士短衬衫',
            commodityevaluate:
                "明水礼盒十分优秀 ,是送朋友,送亲人的不二选择什么,您还不知道明水礼盒,今年过年不收礼,收礼只收明水礼盒,OUT了吧,赶紧买起礼盒送亲朋,送好友吧。完成交易,如有剩余库存,从新上架产品"
        },
        number: 0,//用于计算当前点击的第几个小照片
        isbechoce: false,//用于配合三目运算符改变小照片边框
        chocemg: false     //用于配合三目运算符改变选择商品规格的边框和背景
    }
    //小图片初始化
    const [count, setCount] = useState(state)
    //初始化大照片
    const [countbigimg, setCountbigimg] = useState()
    //初始星星状态
    const [countstart, setCounstart] = useState(false)
    //购物车初始化
    const [countcar, setCountcar] = useState(0)
    const id = useLocation().search.substr(1)
    useEffect(() => {
        axios.post('http://localhost:3001/goodsinfor', { id }).then((res) => {
            console.log(res.data);
            setCount({ ...state, infornation: res.data })
            setCountbigimg(res.data.img)
        })
    }, [])
    //点击选择小图片

    function ischoce(i) {
        console.log(i);
        const choceit = JSON.parse(JSON.stringify(count))
        choceit.number = i
        for (let index = 0; index < choceit.imgs.length; index++) {
            choceit.imgs[index].ischeck = false
        }
        choceit.imgs[i].ischeck = !choceit.imgs[i].ischeck
        setCount(choceit)
        setCountbigimg(choceit.imgs[i].img)
    }
    //点击右箭头切换小照片
    function isright() {
        const rightcount = JSON.parse(JSON.stringify(count))
        for (let index = 0; index < rightcount.imgs.length; index++) {
            rightcount.imgs[index].ischeck = false
        }
        if (rightcount.number < 3) {
            rightcount.number++
            rightcount.imgs[rightcount.number].ischeck = true
            setCount(rightcount)
            setCountbigimg(rightcount.imgs[rightcount.number].img)
        } else {
            rightcount.number = 3
            rightcount.imgs[rightcount.number].ischeck = true
            setCount(rightcount)
            setCountbigimg(rightcount.imgs[rightcount.number].img)
        }
    }
    //点击左箭头切换小照片
    function isleft() {
        const leftcount = JSON.parse(JSON.stringify(count))
        for (let index = 0; index < leftcount.imgs.length; index++) {
            leftcount.imgs[index].ischeck = false
        }
        if (leftcount.number > 0) {
            leftcount.number--
            leftcount.imgs[leftcount.number].ischeck = true
            setCount(leftcount)
            setCountbigimg(leftcount.imgs[leftcount.number].img)
        } else {
            leftcount.number = 0
            leftcount.imgs[leftcount.number].ischeck = true
            setCount(leftcount)
            setCountbigimg(leftcount.imgs[leftcount.number].img)
        }
    }
    //点击加号购物车-1
    function loseone() {
        if (countcar > 0) {
            setCountcar(countcar - 1)
        } else {
            setCountcar(0)
        }
    }
    //点击改变小星星的颜色
    function changestar() {
        setCounstart(!countstart)
        if (countstart === false) {
            console.log(count.infornation.id);
            axios.post('http://localhost:3001/mycenter/addcollect', { id: count.infornation.id }).then((res) => {
                console.log(res);
                message.success("收藏成功")
            })
        } else if (countstart === true) {
            message.warning("取消收藏")
        }
    }
    //点击改变选择规格的边框和背景
    function ischocemg(i) {
        const ischoceit = JSON.parse(JSON.stringify(count))
        for (let index = 0; index < ischoceit.kmg.length; index++) {
            ischoceit.kmg[index].ischeck = false
        }
        ischoceit.kmg[i].ischeck = !ischoceit.kmg[i].ischeck
        setCount(ischoceit)
    }
    //加入购物车
    function addcar() {
        let modul = document.getElementsByClassName('carmoudel')[0]
        modul.className = 'carmoudelshow'
    }
    //模态框的继续购物
    function continuebuy() {
        let modul = document.getElementsByClassName('carmoudelshow')[0]
        modul.className = 'carmoudel'
    }
    //自定义倒计时Hook
    function lastTime(dTime, fun) {
        var nDate = new Date(dTime);
        let itime = null
        clearInterval(itime);
        itime = setInterval(function () {
            var oDate = new Date();
            var Time = Math.floor((nDate - oDate) / 1000);
            var iD = Math.floor(Time / 86400);
            var iH = Math.floor(Time % 86400 / 3600);
            var iM = Math.floor(Time % 86400 % 3600 / 60)
            var iSe = Math.floor(Time % 60);
            if (iD === 0 && iH === 0 && iM === 0 && iSe === 0) {
                clearInterval(itime);
            }
            fun({ iD, iH, iM, iSe })
        }, 1000);
    }
    const [timedowm, settimedowm] = useState({})
    useEffect(() => {
        lastTime('2021-12-17 00:00:00', settimedowm)
    }, [])
    //立即购买
    const navigate = useNavigate()
    function buynow() {
        const a = count.kmg.filter(v => {
            return v.ischeck === true
        })
        console.log(a);

        if (countcar === 0) {
            message.warning('请选择数量！！')
        } else if (a.length === 0) {
            message.warning('请选择规格！！')
        } else {
            const addshop = {
                g_id: count.infornation.id,
                g_num: countcar,
                g_g: a[0].mg,
                img: count.infornation.img,
                s_id: count.infornation.s_id,
                g_name: count.infornation.commodityname,
                price: count.infornation.new_price,
            }
            console.log(addshop);
            navigate('/shop/ordermag/shippmag', { state: [addshop, 'firday'] })
        }

    }
    return (
        <div className='P-middle'>
            <div className="P-top">
                <Breadcrumb>
                    <Breadcrumb.Item>您的当前位置</Breadcrumb.Item>
                    <Breadcrumb.Item>
                        <Link to='/'>首页</Link>
                    </Breadcrumb.Item>
                    <Breadcrumb.Item>
                        <Link to='/tosearch'>全部商品</Link>
                    </Breadcrumb.Item>
                    <Breadcrumb.Item>商品详情</Breadcrumb.Item>
                </Breadcrumb>
            </div>

            <div className="details">
                <div className="showimg">
                    <div className="bigimg">
                        <img src={countbigimg} alt="" />
                    </div>
                    <div className="littleimg">
                        <div className="left">
                            <i className='fa fa-angle-left' onClick={isleft}></i>
                        </div>
                        {
                            count.imgs.map((v, i) => {
                                return (
                                    <div className={v.ischeck ? "littleimg2" : "littleimg1"} key={i} onClick={() => ischoce(`${i}`)}>
                                        <img src={v.img} alt="" />
                                    </div>
                                )
                            })
                        }
                        <div className="right" onClick={isright}>
                            <i className='fa fa-angle-right'></i>
                        </div>
                    </div>
                    <div className="timedown2">
                        <div className="timetext">距离开始还剩</div>
                        <span>{timedowm.iD}天</span> ：
                        <span>{timedowm.iH}</span> ：
                        <span>{timedowm.iM}</span> ：
                        <span>{timedowm.iSe}</span>
                    </div>
                </div>
                <div className="showtext">
                    <div className="kg">
                        {count.infornation.title}
                    </div>
                    <div className="nationwide">全国</div>
                    <div className="friday">礼拜五</div>
                    <div className="nextday">次日达</div>
                    <div className="self-support">自营</div>
                    <div className="information">
                        <div className="senior">
                            <div className="seniorimg">
                                <img src={littleimg4} alt="" />
                                <div className="buyer">资深买家</div>
                            </div>
                        </div>
                        <div className="righttext">
                            {count.infornation.infor}
                        </div>
                    </div>
                    <div className="nowprice">
                        <strong>现价：￥{count.infornation.new_price}</strong>&nbsp;&nbsp;&nbsp;<span>原价：{count.infornation.old_price}</span>
                    </div>
                    <div className="chocekg">
                        <div className="ischocekg">请选择规格</div>
                        {
                            count.kmg.map((v, i) => {
                                return (
                                    <div className={count.kmg[i].ischeck ? 'kgnum1' : 'kgnum'} onClick={() => ischocemg(`${i}`)} key={i}>{v.mg}</div>
                                )
                            })
                        }

                        <div className="addchar">
                            <div className="ischocekg">数量:</div>
                            <div className="addnum">
                                <div className="losenum" onClick={loseone}><i className='fa fa-minus'></i></div>
                                <div className="carnums">{countcar}</div>
                                <div className="losenum" onClick={() => setCountcar(countcar + 1)}><i className='fa fa-plus'></i></div>
                            </div>
                            <div className="to-cart" onClick={addcar}>
                                加入购物车
                            </div>
                            <div className="to-cart buycar" onClick={buynow}>
                                立即购买
                            </div>
                        </div>
                        <div className="share">
                            <div className={countstart ? "star" : "star1"} onClick={changestar} >
                                <i className='fa fa-star'></i>
                            </div>
                            <strong>收藏此商品</strong>
                            <div className="clickshare">
                                <img src={shareimg} alt="" />
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div className="product-details">
                <div className="product-top">
                    <div className="product-top1">商品介绍</div>
                    <div className="product-top1 product-top2">商品评价</div>
                </div>
                <div className="boyshort">
                    <strong>{count.infornation.commodityname}</strong> <br />
                    <span>
                        {count.infornation.commodityevaluate}
                    </span>
                </div>
                <div className="boyimg">
                    <img src={boyimg} alt="" />
                </div>
                <div className="boyshort">
                    <strong>{count.infornation.commodityname}</strong> <br />
                    <span> {count.infornation.commodityevaluate}
                    </span>
                </div>
                <div className="boyimg">
                    <img src={boyimg} alt="" />
                </div>
            </div>
            <div className="evaluate">
                <div className="product-top">
                    <div className="product-top1 product-top2">商品介绍</div>
                    <div className="product-top1 ">商品评价</div>
                </div>
                {
                    count.evaluate.map((v, i) => {
                        return (
                            <div className="evaluate-information" key={i}>
                                <div className="evaluate-buyerimg">
                                    <div className="buyerimg">
                                        <img src={buyimg} alt="" />
                                        <p>{v.phon}</p>
                                    </div>
                                </div>
                                <div className="evaluate-text">
                                    <div className="statrandtime">
                                        <div className="stardiv">
                                            <Rate disabled defaultValue={v.starnums} />
                                        </div>
                                        <p><span className='evaluate-time'>{v.time} &nbsp;&nbsp;{v.timenums}</span></p>
                                        <p className='myevaluate'>{v.evaluate}</p>
                                    </div>
                                    <div className="myevaluateimg">
                                        <img src={buyimg2} alt="" />
                                    </div>
                                    <div className="myevaluateimg">
                                        <img src={buyimg2} alt="" />
                                    </div>
                                    <div className="myevaluateimg">
                                        <img src={buyimg2} alt="" />
                                    </div>
                                    <div className="myevaluateimg">
                                        <img src={buyimg2} alt="" />
                                    </div>
                                </div>
                            </div>
                        )
                    })
                }
            </div>
            <div className="carmoudel">
                <div className="addover">
                    <div className="rightnum">
                        <i className='fa fa-check-circle-o'></i>
                    </div>
                    <strong>加入购物车成功</strong>
                </div>
                <div className="continuebuy" onClick={continuebuy}>继续购物</div>
                <div className="buynow">立即购买</div>
            </div>
        </div>
    )
}
